import React, { useState, useRef, useEffect } from 'react';
import cn from 'classnames';
import moment from 'moment';
import s from './style.module.css';
import i from '../../index.module.css';
import BreadCrumb from '@/components/BreadCrumb';
import { deepClone } from '@/common/constant.js';
import cookie from 'react-cookies';
import {
  Table,
  Form,
  Icon,
  Input,
  Dialog,
  Button,
  Pagination,
  Message,
  Helper,
  Datetime,
  Confirm,
  Switch,
  Dropdown,
  Menu,
  Tooltip,
  Textarea,
  Select,
} from '@knownsec/react-component';
// import SelectAnt from '@/components/SelectAnt';
import { Checkbox } from 'antd';
import {
  queryUser,
  freezeUser,
  restartUser,
  modifyNormalPwd,
  modifyPwd,
  register,
  getAccount,
  putAccount,
  delUser,
  getRoleList as getRoleListApi,
} from '../../../API/index';
import { getErrorMessage } from '@/common/constant';
import recursionForm from '@/common/recursionForm';
export default function UserManage() {
  const name = cookie.load('username');
  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 18 },
  };
  const form = useRef(); //修改密码
  const [username, userGroup] = [cookie.load('username'), localStorage.group];
  const [isModify, setIsModify] = useState(true);
  const [formAdd] = Form.useForm(); //新增用户
  const [formInfo] = Form.useForm(); //编辑信息
  const [count, setCount] = useState(0);
  const [tableData, setTableData] = useState([]);
  const [visible, setVisible] = useState(false); //修改密码
  const [visibleAdd, setVisibleAdd] = useState(false); //添加用户
  const [visibleInfo, setVisibleInfo] = useState(0); //编辑信息
  const [isDown, setIsDown] = useState('');
  const [roleVisible, setRoleVisible] = useState(false);
  const [query, setQuery] = useState({
    page: 1,
    pageSize: 10,
  });
  const [loading, setLoading] = useState(false);
  const [show, setShow] = useState(true); //是否修改系统管理员
  const [roleOption, setRoleOption] = useState([]);
  const getRoleList = async () => {
    try {
      const { data } = await getRoleListApi({ page: 1, pageSize: 50 });
      console.log(data);

      setRoleOption(
        data.data.map((item) => {
          return { value: item.user_group_id, label: item.group, desc: item.desc };
        })
      );
    } catch (err) {
      console.log(err);
    }
  };
  useEffect(() => {
    getData();
  }, [query]);
  useEffect(() => {
    getRoleList();
  }, []);
  const validatormap = (rule, value, callback) => {
    const reg = new RegExp(
      '^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$'
    );
    if (rule.field == 'email' && !reg.test(value)) {
      callback('请填写邮件地址');
    } else {
      return Promise.resolve();
    }
  };
  // const currentLabel = Ref('');
  const [currentLabel,setCurrentLabel] = useState('')
  function dealData(newItem) {
    const values = Object.keys(newItem).reduce((total, key) => {
      let value;
      if (newItem[key].selectedItem) {
        console.log(newItem[key].selectedItem[0]);
        // currentLabel = newItem[key].selectedItem[0].label;
        setCurrentLabel(newItem[key].selectedItem[0].label)
        if (newItem[key].selectedItem.length > 0) {
          value = [newItem[key].selectedItem[0].value];
        } else if (newItem[key].selectedItem.length === 0) {
          value = item[key];
        }
      } else if (Object.keys(newItem[key]).indexOf('value') > -1) {
        value = newItem[key].value;
      } else {
        value = newItem[key];
      }
      total[key] = value;
      return total;
    }, {});
    console.log(values);
    return values;
  }
  const onValues2 = (data) => {
    let values = dealData(data);
    console.log(currentLabel);
    formAdd.current.setFieldsValue(values);
  };
  const onValuesInfo = (newItem) => {
    const values = dealData(newItem);
    formInfo.current.setFieldsValue(values);
  };
  const getData = () => {
    setLoading(true);
    queryUser('GET', query).then((res) => {
      setLoading(false);
      setTableData(res.data.data);
      setCount(res.data.count);
    });
  };
  const changeItem = (e, v) => {
    form.current.setFieldsValue({ [e]: v });
  };
  const editUserPW = (item, show) => {
    setShow(show);
    form.current.setFieldsValue(item);
    setVisible(true);
  };
  const editUserInfo = async (item, isModify = true) => {
    formInfo.current.resetFields();
    setVisibleInfo(item);
    setIsModify(isModify);
    const userInfo = await getAccount(item.user_id);
    userInfo.data.limit_targets = userInfo.data.limit_targets.join('\n');
    userInfo.data.expired_time = userInfo.data.expired_time
      ? moment(userInfo.data.expired_time)
      : '';

    formInfo.current.setFieldsValue(userInfo.data);
  };
  const useData = (b, user) => {
    if (b) {
      restartUser('POST', { username: user })
        .then((res) => {
          Message.show({
            type: res.status,
            message: res.message,
            onclose() {
              getData();
            },
          });
        })
        .catch((err) => Message.show({ type: 'error', message: getErrorMessage(err) }));
    } else {
      freezeUser('POST', { username: user })
        .then((res) => {
          Message.show({
            type: res.status,
            message: res.message,
            onclose() {
              getData();
            },
          });
        })
        .catch((err) => Message.show({ type: 'error', message: getErrorMessage(err) }));
    }
  };
  const submitInfo = (type) => {
    if (type === 'add') {
      formAdd.current.validateFields().then((res) => {
        const res_ = deepClone(res);
        // res_.group = res_.group;
        if (res_.limit_targets?.trim()) {
          res_.limit_targets = res_.limit_targets.trim().split('\n');
        } else {
          res_.limit_targets = [];
        }
        res_.group = [currentLabel];
        register(res_)
          .then((res) => {
            if (res.status === 'success') {
              Message.show({
                pro: true,
                type: 'success',
                message: '操作成功',
                showClose: false,
              });
              setVisibleAdd(false);
              formAdd.current.resetFields();
              getData();
            }
          })
          .catch((err) => {
            let msg = '';
            if (err.message) {
              msg = err.message;
            } else {
              msg = Object.values(err.data)[0];
            }
            Message.show({
              pro: true,
              type: 'error',
              message: `${msg}`,
              showClose: false,
            });
          });
      });
    } else if (type === 'info') {
      formInfo.current.validateFields().then((res) => {
        const res_ = deepClone(res);
        !Array.isArray(res_.group) && (res_.group = [res_.group]);
        if (res_.limit_targets?.trim()) {
          res_.limit_targets = res_.limit_targets.trim().split('\n');
        } else {
          res_.limit_targets = [];
        }
        putAccount({ data: res_, id: visibleInfo.user_id })
          .then((res) => {
            if (res.status === 'success') {
              Message.show({
                pro: true,
                type: 'success',
                message: '操作成功',
                showClose: false,
              });
              setVisibleInfo(false);
              formInfo.current.resetFields();
              getData();
            }
          })
          .catch((err) => {
            let msg = '';
            if (err.message) {
              msg = err.message;
            } else {
              msg = Object.values(err.data)[0];
            }
            Message.show({
              pro: true,
              type: 'error',
              message: `${msg}`,
              showClose: false,
            });
          });
      });
    } else {
      form.current.validateFields().then((res) => {
        if (type === 'super') {
          modifyPwd('POST', res)
            .then((res) => {
              Message.show({
                type: res.status,
                message: res.message,
                onclose() {
                  if (show) {
                    cookie.save('token', '');
                    cookie.save('refresh', '');
                    cookie.save('username', '');
                    window.location.href = '#/login/';
                  } else {
                    setVisible(false);
                    form.current.resetFields();
                  }
                },
              });
            })
            .catch((err) => Message.show({ type: 'error', message: getErrorMessage(err) }));
        } else {
          modifyNormalPwd('POST', res)
            .then((res) => {
              Message.show({
                type: res.status,
                message: res.message,
                onclose() {
                  if (show) {
                    cookie.save('token', '');
                    cookie.save('refresh', '');
                    cookie.save('username', '');
                    window.location.href = '#/login/';
                  } else {
                    setVisible(false);
                    form.current.resetFields();
                  }
                },
              });
            })
            .catch((err) => Message.show({ type: 'error', message: getErrorMessage(err) }));
        }
      });
    }
  };
  const delUserBtn = async (e) => {
    Confirm({
      pro: true,
      className: s.dialogName2,
      title: '删除用户',
      message: <div className={s.Box}>删除用户将对应删除该用户下所有数据，是否确认删除？</div>,
      onconfirm: async () => {
        const params = { user_ids: e };
        const res = await delUser(params);
        if (res.status === 'success') {
          getData();
          Message.show({
            pro: true,
            type: 'success',
            message: '操作成功',
            showClose: false,
          });
        }
      },
    });
  };
  const column = [
    {
      title: '用户',
      key: 'username',
      dataIndex: 'username',
      className: s.w_8,
      render: (value) => {
        return (
          <Tooltip overlay={value} placement="topLeft">
            <span>{value}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '状态',
      key: 'status',
      className: s.w_6,
      render: (cur, item) => {
        return (
          <div>
            {!item.is_freeze ? (
              <svg
                className={s.vas}
                width="16px"
                height="16px"
                viewBox="0 0 16 16"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xlink="http://www.w3.org/1999/xlink"
              >
                <g id="页面设计" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                  <g id="用户管理" transform="translate(-484.000000, -234.000000)">
                    <g id="编组-9" transform="translate(184.000000, 218.000000)">
                      <g id="编组-16" transform="translate(298.000000, 14.000000)">
                        <g id="3.Icon/2.面性/4.操作编辑类/正确">
                          <path
                            d="M10,2.5 C14.1421356,2.5 17.5,5.85786438 17.5,10 C17.5,14.1421356 14.1421356,17.5 10,17.5 C5.85786438,17.5 2.5,14.1421356 2.5,10 C2.5,5.85786438 5.85786438,2.5 10,2.5 Z M13.5799513,7.65165043 L9.16,12.070625 L6.50888348,9.41941738 L5.625,10.3033009 L9.16053391,13.8388348 L14.4638348,8.53553391 L13.5799513,7.65165043 Z"
                            id="形状"
                            fill="#11AB4E"
                            fillRule="evenodd"
                          ></path>
                          <rect id="矩形-copy-68" x="0" y="0" width="20" height="20"></rect>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
            ) : (
              <svg
                className={s.vas}
                width="16px"
                height="16px"
                viewBox="0 0 16 16"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xlink="http://www.w3.org/1999/xlink"
              >
                <g id="页面设计" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                  <g id="用户管理" transform="translate(-484.000000, -281.000000)">
                    <g id="编组-9备份-2" transform="translate(184.000000, 265.000000)">
                      <g id="编组-16" transform="translate(298.000000, 14.000000)">
                        <g id="3.Icon/2.面性/4.操作编辑类/减去">
                          <path
                            d="M10,2.5 C14.1421356,2.5 17.5,5.85786438 17.5,10 C17.5,14.1421356 14.1421356,17.5 10,17.5 C5.85786438,17.5 2.5,14.1421356 2.5,10 C2.5,5.85786438 5.85786438,2.5 10,2.5 Z M14.375,9.375 L14.375,10.625 L5.625,10.625 L5.625,9.375 L14.375,9.375 Z"
                            id="形状"
                            fill="#CBD1DA"
                            fillRule="evenodd"
                          ></path>
                          <rect id="矩形-copy-70" x="0" y="0" width="20" height="20"></rect>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
            )}
            <span className={i.ml5}>{!item.is_freeze ? '已启用' : '已禁用'}</span>
          </div>
        );
      },
    },
    { title: '角色', key: 'group', dataIndex: 'group', className: s.w_6 },

    {
      title: '创建人',
      key: 'parent_username',
      dataIndex: 'parent_username',
      className: s.w_6,
      render: (value) => value || '--',
    },
    {
      title: '创建时间',
      key: 'created_at',
      dataIndex: 'created_at',
      render: (value) => (value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '--'),
    },
    {
      title: '过期时间',
      key: 'expired_time',
      dataIndex: 'expired_time',
      render: (value) => (value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '--'),
    },
    {
      title: '最近登录时间',
      key: 'cur_login_info',
      dataIndex: 'cur_login_info',
      render: (cur, item) => {
        return cur.time ? moment(cur.time).format('YYYY-MM-DD HH:mm:ss') : '--';
      },
    },
    {
      title: '操作',
      key: 'action',
      className: s.w_8,
      render: (cur, item) => {
        const id = item.id;
        return (
          <Dropdown
            onVisibleChange={(e) => {
              const id_ = e ? id : '';
              setIsDown(id_);
            }}
            overlay={
              <Menu>
                {username === 'admin' ? (
                  item.username === 'admin' ? (
                    <>
                      <Menu.Item
                        onClick={
                          () => editUserPW(item, true) // 修改自身密码需要输入当前密码
                        }
                      >
                        <span>修改密码</span>
                      </Menu.Item>
                      <Menu.Item onClick={() => editUserInfo(item)}>
                        <span>编辑信息</span>
                      </Menu.Item>
                    </>
                  ) : (
                    <>
                      <Menu.Item
                        onClick={
                          () => editUserPW(item, false) // admin修改除自身以外的密码不需要输入当前密码
                        }
                      >
                        <span>修改密码</span>
                      </Menu.Item>
                      <Menu.Item onClick={() => editUserInfo(item)}>
                        <span>编辑信息</span>
                      </Menu.Item>
                      <Menu.Item onClick={() => delUserBtn([item.user_id])}>
                        <span>删除</span>
                      </Menu.Item>
                      {!item.is_freeze ? (
                        <Menu.Item onClick={() => useData(false, item.username)}>
                          <span>禁用</span>
                        </Menu.Item>
                      ) : (
                        <Menu.Item onClick={() => useData(true, item.username)}>
                          <span>启用</span>
                        </Menu.Item>
                      )}
                    </>
                  )
                ) : item.username === username ? (
                  <>
                    <Menu.Item
                      onClick={
                        () => editUserPW(item, true) // 修改自身密码需要输入当前密码
                      }
                    >
                      <span>修改密码</span>
                    </Menu.Item>
                    <Menu.Item onClick={() => editUserInfo(item, false)}>
                      <span>查看信息</span>
                    </Menu.Item>
                  </>
                ) : item.group[0] === '管理员' ? (
                  <Menu.Item onClick={() => editUserInfo(item, false)}>
                    <span>查看信息</span>
                  </Menu.Item>
                ) : (
                  <>
                    <Menu.Item
                      onClick={
                        () => editUserPW(item, false) // 修改除自身以外的密码不需要输入当前密码
                      }
                    >
                      <span>修改密码</span>
                    </Menu.Item>
                    <Menu.Item onClick={() => editUserInfo(item)}>
                      <span>编辑信息</span>
                    </Menu.Item>
                    <Menu.Item onClick={() => delUserBtn([item.user_id])}>
                      <span>删除</span>
                    </Menu.Item>
                    {!item.is_freeze ? (
                      <Menu.Item onClick={() => useData(false, item.username)}>
                        <span>禁用</span>
                      </Menu.Item>
                    ) : (
                      <Menu.Item onClick={() => useData(true, item.username)}>
                        <span>启用</span>
                      </Menu.Item>
                    )}
                  </>
                )}
              </Menu>
            }
            trigger={['click']}
          >
            <a
              className="ant-dropdown-link pr"
              onClick={(e) => {
                e.preventDefault();
              }}
            >
              管理
              <div
                className={s.jt}
                style={{ transform: id === isDown ? 'rotate(45deg)' : 'rotate(-135deg)' }}
              ></div>
            </a>
          </Dropdown>
        );
      },
    },
  ];

  useEffect(() => {}, [tableData]);
  const [isChecked, setIsChecked] = useState(true);
  const handleCheckChange = () => {
    setIsChecked(!isChecked);
  };
  return (
    <div className={i.mainContent}>
      <BreadCrumb
        arr={[
          { link: '', name: '用户管理' },
          { link: '', name: '用户列表', active: true },
        ]}
      />
      <div className={cn(s.content, i.p24, i.oa, i.h100p, i.mins)}>
        <div className={s.bgc}>
          <div className={s.btnBox}>
            <Button
              pro
              type="primary"
              className={s.btn}
              onClick={() => {
                setVisibleAdd(true);
              }}
            >
              添加用户
            </Button>
            <p onClick={() => setRoleVisible(true)}>查看角色说明</p>
          </div>
          <div className={i.p24}>
            <Table columns={column} data={tableData} tableLoading={loading} loadingLabel="" />
            <div className={cn(i.df, i.aic, i.jcfe, i.pb20, i.pt20)}>
              {count > 10 && (
                <Pagination
                  total={count}
                  showQuickJumper={{ goButton: true }}
                  showSizeChanger={true}
                  pageSizeOptions={['10', '20', '50']}
                  current={query.page}
                  showTotal={(total) => `共${total}条`}
                  onChange={(page, pageSize) => {
                    setQuery({ page, pageSize });
                  }}
                />
              )}
            </div>
          </div>
        </div>
      </div>
      <Dialog
        className={s.w560}
        title="权限角色"
        visible={roleVisible}
        cusCancel={
          <Button type="default" className={i.mr20} onClick={() => setRoleVisible(false)}>
            取消
          </Button>
        }
        onhide={() => setRoleVisible(false)}
        onsubmit={() => setRoleVisible(false)}
      >
        <div className={s.p24_40}>
          <table className={s.roleTable} border="1" cellSpacing="0">
            <tr>
              <td>角色名</td>
              <td>角色描述</td>
            </tr>
            {roleOption.map((item) => {
              return (
                <tr>
                  <td>{item.label}</td>
                  <td>{item.desc}</td>
                </tr>
              );
            })}
          </table>
        </div>
      </Dialog>
      <Dialog
        title="添加用户"
        visible={visibleAdd}
        confirmText=""
        cancelText=""
        className={s.w540}
        onhide={() => {
          setVisibleAdd(false);
          formAdd.current.resetFields();
        }}
      >
        <div className={cn(i.p24, s.addUser)}>
          <Form
            ref={formAdd}
            {...layout}
            onValuesChange={(newItem, allValues) => {
              console.log(newItem, allValues);
              onValues2(newItem, allValues);
            }}
          >
            <Form.Item
              name="username"
              label="用户名"
              rules={[{ required: true, message: '用户名不能为空' }]}
            >
              <Input
                pro
                className={cn(i.dib, i.w300)}
                placeholder={'请输入'}
                autoComplete={'off'}
              />
            </Form.Item>
            <Form.Item
              name="password"
              label="密码"
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input
                pro
                className={cn(i.dib, i.w300)}
                placeholder={'请输入'}
                autoComplete={'off'}
              />
            </Form.Item>
            <Form.Item
              name="group"
              label="权限角色"
              rules={[{ required: true, message: '权限角色不能为空' }]}
            >
              <Select pro option={roleOption} className={s.w_30} placeholder="请选择权限" />
            </Form.Item>
            <Form.Item
              name="real_name"
              label="真实姓名"
              rules={[{ required: true, message: '姓名不能为空' }]}
            >
              <Input
                className={cn(i.dib, i.w300)}
                pro
                placeholder={'请输入'}
                autoComplete={'off'}
                onChange={({ value }) => changeItem('username', value)}
              />
            </Form.Item>
            <Form.Item
              name="email"
              label="电子邮箱"
              rules={[{ required: true, validator: validatormap }]}
            >
              <Input
                className={cn(i.dib, i.w300)}
                pro
                placeholder={'请输入'}
                autoComplete={'off'}
                onChange={({ value }) => changeItem('username', value)}
              />
            </Form.Item>
            <Form.Item name="phone" label="电话号码">
              <Input
                className={cn(i.dib, i.w300)}
                pro
                placeholder={'请输入'}
                autoComplete={'off'}
                onChange={({ value }) => changeItem('username', value)}
              />
            </Form.Item>
            <Form.Item name="department" label="所在部门">
              <Input
                className={cn(i.dib, i.w300)}
                pro
                placeholder={'请输入'}
                autoComplete={'off'}
                onChange={({ value }) => changeItem('username', value)}
              />
            </Form.Item>
            <Form.Item
              name="expired_time"
              label="用户有效期"
              rules={[{ required: true, message: '有效期不能为空' }]}
            >
              <Datetime getPopupContainer={(triggerNode) => triggerNode} />
            </Form.Item>
            <div className={s.itemBox}>
              <Form.Item name="limit_targets" label="限制目标范围">
                <Textarea
                  pro
                  className={cn(i.dib, i.w300, s.tear)}
                  placeholder={'请输入'}
                  autoComplete={'off'}
                />
              </Form.Item>
              <Helper
                placement="top"
                overlay={
                  <div>
                    <p>1.*号表示可以添加任何目标</p>
                    <p>2.https://www.example.com/表示只可以添加该目标</p>
                    <p>3.添加多个目标请换行分割</p>
                    <p>4.为空表示禁止添加任何业务系统</p>
                  </div>
                }
                className={s.helper}
              ></Helper>
            </div>
          </Form>
        </div>
        <div className={s.check}>
          <Checkbox onChange={handleCheckChange} />
          <div className={s.tips}>
            尊敬的用户，在您使用产品过程中，我们需要收集某些个人信息以提升服务质量。请您授权我们进行收集和使用，我们将严格遵守相关规定，确保您的信息安全。
          </div>
        </div>

        <div className={cn(i.tac, s.dioBtn)}>
          <Button
            className={i.vam}
            onClick={() => {
              setVisibleAdd(false);
              formAdd.current.resetFields();
            }}
          >
            取消
          </Button>
          <Button
            type="primary"
            disabled={isChecked}
            className={cn(i.ml24, i.vam)}
            onClick={() => submitInfo('add')}
          >
            确定
          </Button>
        </div>
      </Dialog>
      <Dialog
        title="修改密码"
        visible={visible}
        confirmText=""
        cancelText=""
        className={s.w540}
        onhide={() => {
          setVisible(false);
          form.current.resetFields();
        }}
      >
        <div className={cn(i.p24, s.addUser)}>
          <Form ref={form} {...layout}>
            <Form.Item
              name="username"
              label="用户"
              rules={[{ required: true, message: '用户不能为空' }]}
            >
              <Input
                disabled
                pro
                className={cn(i.dib, i.w300)}
                placeholder={'请输入'}
                autoComplete={'off'}
                onChange={({ value }) => changeItem('username', value)}
              />
            </Form.Item>
            {show && (
              <Form.Item
                name="old_password"
                label="当前密码"
                rules={[{ required: true, message: '当前密码不能为空' }]}
              >
                <Input
                  type="password"
                  pro
                  className={cn(i.dib, i.w300)}
                  placeholder={'请输入'}
                  autoComplete={'off'}
                  onChange={({ value }) => changeItem('old_password', value)}
                />
              </Form.Item>
            )}
            <Form.Item name="password1" label="密码">
              <Input
                type="password"
                pro
                className={cn(i.dib, i.w300)}
                placeholder={'请输入'}
                autoComplete={'off'}
                onChange={({ value }) => changeItem('password1', value)}
              />
            </Form.Item>
            <Form.Item
              name="password2"
              label="密码确认"
              rules={[{ required: true, message: '确认密码不能为空' }]}
            >
              <Input
                type="password"
                pro
                className={cn(i.dib, i.w300)}
                placeholder={'请输入'}
                autoComplete={'off'}
                onChange={({ value }) => changeItem('password2', value)}
              />
            </Form.Item>
          </Form>
        </div>
        <div className={cn(i.tac, s.dioBtn)}>
          <Button
            className={i.vam}
            onClick={() => {
              form.current.resetFields();
              setVisible(false);
            }}
          >
            取消
          </Button>
          <Button
            type="primary"
            className={cn(i.ml24, i.vam)}
            onClick={() => submitInfo(show ? 'super' : 'normal')}
          >
            确定
          </Button>
        </div>
      </Dialog>
      <Dialog
        title={isModify ? '编辑信息' : '查看信息'}
        visible={visibleInfo}
        confirmText=""
        cancelText=""
        className={s.w540}
        onhide={() => {
          setVisibleInfo(null);
          formInfo.current.resetFields();
        }}
      >
        <div className={cn(i.p24, s.addUser)}>
          <Form
            ref={formInfo}
            {...layout}
            onValuesChange={(newItem, allValues) => {
              onValuesInfo(newItem, allValues);
            }}
          >
            <Form.Item
              name="real_name"
              label="真实姓名"
              rules={[{ required: true, message: '姓名不能为空' }]}
            >
              <Input
                className={cn(i.dib, i.w300)}
                pro
                placeholder={'请输入'}
                autoComplete={'off'}
                disabled={!isModify}
                onChange={({ value }) => changeItem('username', value)}
              />
            </Form.Item>
            <Form.Item
              name="email"
              label="电子邮箱"
              rules={[{ required: true, validator: validatormap }]}
            >
              <Input
                className={cn(i.dib, i.w300)}
                pro
                placeholder={'请输入'}
                autoComplete={'off'}
                disabled={!isModify}
                onChange={({ value }) => changeItem('username', value)}
              />
            </Form.Item>
            <Form.Item name="phone" label="电话号码">
              <Input
                className={cn(i.dib, i.w300)}
                pro
                placeholder={'请输入'}
                autoComplete={'off'}
                disabled={!isModify}
                onChange={({ value }) => changeItem('username', value)}
              />
            </Form.Item>
            <Form.Item name="department" label="所在部门">
              <Input
                className={cn(i.dib, i.w300)}
                pro
                placeholder={'请输入'}
                autoComplete={'off'}
                disabled={!isModify}
                onChange={({ value }) => changeItem('username', value)}
              />
            </Form.Item>
            <Form.Item
              name="group"
              label="权限角色"
              rules={[{ required: true, message: '权限角色不能为空' }]}
            >
              <Select
                pro
                option={roleOption}
                disabled
                className={s.w_30}
                placeholder="请选择权限"
              />
            </Form.Item>
            {visibleInfo && visibleInfo.username !== 'admin' && (
              <>
                <Form.Item
                  name="expired_time"
                  label="用户有效期"
                  rules={[{ required: true, message: '有效期不能为空' }]}
                >
                  <Datetime
                    disabled={!isModify}
                    getPopupContainer={(triggerNode) => triggerNode}
                    className={s.timeInp}
                  />
                </Form.Item>
                <div className={s.itemBox}>
                  <Form.Item name="limit_targets" label="限制目标范围">
                    <Textarea
                      pro
                      className={cn(i.dib, i.w300, s.tear)}
                      placeholder={'请输入'}
                      autoComplete={'off'}
                      disabled={!isModify}
                    />
                  </Form.Item>
                  <Helper
                    placement="top"
                    overlay={
                      <div>
                        <p>1.*号表示可以添加任何目标</p>
                        <p>2.https://www.example.com/表示只可以添加该目标</p>
                        <p>3.添加多个目标请换行分割</p>
                        <p>4.为空表示禁止添加任何业务系统</p>
                      </div>
                    }
                    className={s.helper}
                  ></Helper>
                </div>
              </>
            )}
          </Form>
        </div>
        <div className={cn(i.tac, s.dioBtn)}>
          <Button className={i.vam} onClick={() => setVisibleInfo(null)}>
            取消
          </Button>
          <Button
            type="primary"
            className={cn(i.ml24, i.vam)}
            onClick={isModify ? () => submitInfo('info') : () => setVisibleInfo(null)}
          >
            确定
          </Button>
        </div>
      </Dialog>
    </div>
  );
}
